<template>
  <div>
    <!-- 点击按钮 -->
    <el-button type="primary"  icon="el-icon-plus" highlight-current-row @click="showBus">新增商家</el-button>
    <!--  -->
    <el-table  style="margin-top:15px" border :data="list">
      <el-table-column type=index label="序号" width="100px" align="center"></el-table-column>
      <el-table-column prop="name" label="商家名称" width="200px" align="center"></el-table-column>
      <el-table-column prop="tel" label="商家电话" width="200px" align="center"></el-table-column>
      <el-table-column prop="address" label="商家地址" width="200px" align="center">
       <!-- <template slot-scope="{row,$index}">
         <img :src="row.imgUrl" style="width:60px;height: inherit;">
       </template> -->
      </el-table-column>
      <el-table-column prop="prop" label="相关操作" width="width" align="center">
        <template slot-scope="{row,$index}">
          <el-button type="success" icon="el-icon-zoom-in" size="mini" @click="seeBusiness(row)">查看商家信息</el-button>
          <el-button type="warning" icon="el-icon-edit" size="mini" @click="editBusiness(row,$index)">修改商家信息</el-button>
          <!-- 删除 -->
          <el-popconfirm :title="`确定删除${row.name}吗？`" icon="el-icon-warning" icon-color="red" @onConfirm="delStore($index)" @onCancel="delStoreOk">
            <el-button slot="reference" icon="el-icon-edit" size="mini" style="margin:0 10px;background-color: #f56c6c; color:#F8F8FF">删除商家信息</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary"  icon="el-icon-d-arrow-right" highlight-current-row @click="godetails" style="margin: 15px 15px 0 1010px">查看所有商家商品</el-button>
    <!-- 修改商品抽屉-->
    <el-drawer title="商家信息" :before-close="handleClose" :visible.sync="dialog" direction="ltr" custom-class="demo-drawer" ref="drawer">
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="商家名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商家地址" :label-width="formLabelWidth">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商家排名" :label-width="formLabelWidth">
            <el-input v-model="form.level" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商家销量" :label-width="formLabelWidth">
            <el-input v-model="form.number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" :label-width="formLabelWidth">
            <el-input v-model="form.tel" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer" style="margin-left:50px">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 添加商品弹出框   :model="form"    v-model="form.name"-->
    <el-dialog title="商家信息" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="tform" :rules="rules" ref="cur">
        <el-form-item label="商家名称" label-width="100px" prop="name">
          <el-input  v-model="tform.name"  autocomplete="off" width="50" placeholder="例 : 抬棺团队"></el-input>
        </el-form-item>
        <el-form-item label="商家地址" label-width="100px" prop="address">
          <el-input  v-model="tform.address" autocomplete="off" width="150" placeholder="例 : 西北火葬场负一楼"></el-input>
        </el-form-item>
        <el-form-item label="商家排名" label-width="100px" prop="level">
          <el-input  v-model="tform.level" autocomplete="off" width="150" placeholder="例 : 5"></el-input>
        </el-form-item>
        <el-form-item label="商家销量" label-width="100px" prop="number">
          <el-input  v-model="tform.number" autocomplete="off" width="150" placeholder="例 : 3000"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" label-width="100px" prop="tel">
          <el-input  v-model="tform.tel" autocomplete="off" width="150" placeholder="例 : 18858869321"  @keyup.native.enter="upUsers"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="lowUsers" >取 消</el-button>
        <el-button type="primary" @click="upUsers">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查看商品弹出框 -->
    <el-dialog title="商家信息" :visible.sync="dialogTableVisible">
    <el-table border :data="Business" style="margin-bottom:15px">
      <el-table-column property="id" label="ID" width="50" align="center"></el-table-column>
      <el-table-column property="name" label="名称" width="120" align="center"></el-table-column>
      <el-table-column property="address" label="地址" width="200" align="center"></el-table-column>
      <el-table-column property="number" label="销量" width="200" align="center"></el-table-column>
      <el-table-column property="level" label="排名" width="200" align="center"></el-table-column>
      <el-table-column property="tel" label="电话" width="200" align="center"></el-table-column>
    </el-table>
  </el-dialog>

  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: "",
  data() {
    return {
      visible: false,
      dialogFormVisible: false, //控制弹出框
      form:{    //收集新增品牌数据
        name:'',
        address:'',
        tel:'',
        level:'',
        number:''
      }, 
      tform:{    //收集新增品牌数据
        name:'',
        address:'',
        tel:'',
        level:'',
        number:''
      }, 
      // 表单验证
      rules:{
        name: [
          { required: true, message: '请输入品牌名称', trigger: 'change' },
          { min:2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入商家地址', trigger: 'change' },
          { min:2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'change' }
        ],
        tel: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { min:1, max: 11, message: '输入正确手机号11位', trigger: 'change' }
        ],
        level: [
          { required: true, message: '请输入排名', trigger: 'change' },
          { min:1, max: 10, message: '输入正确排名1-300', trigger: 'change' }
        ],
        number: [
          { required: true, message: '请输入销量', trigger: 'change' },
          { min:1, max: 10, message: '输入输入正常信息1-3000', trigger: 'change' }
        ]
      },
      Business:[], //查看商家信息
      dialogTableVisible: false, //查看弹窗

      //抽屉的东西
      table: false,
      dialog: false,
      loading: false, 
      formLabelWidth: '120px',
      timer: null,
    }
  },
  methods: {
    //抽屉带的
    handleClose(done) {
      if (this.loading) {
        this.loading = false;
        return;
      }
      this.$confirm('确定要提交表单吗？')
        .then(_ => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 200);
          }, 1000);
        })
        .catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    //添加商家信息
    showBus(){
      this. form = {    //收集新增品牌数据
        name:'',
        address:'',
        tel:'',
        level:'',
        number:''
      }, 
      //清表单验证
      setTimeout(()=>{
        this.$refs.cur.clearValidate()
      },2000)
      this.dialogFormVisible = true
    },
    //添加 确定的按钮
    upUsers(){
      this.dialogFormVisible = false
      if(!this.tform.name || !this.tform.address || !this.tform.tel){
        this.$message.error('请确定输入信息符合条件')
      }else{
        this.$message.success('添加成功')
        this.list.push(this.tform)
      }
      //清空表单验证
      this.$nextTick(()=>{
        this.$refs.cur.clearValidate()
      })
    },
    //添加 取消的按钮
    lowUsers(){
      this.dialogFormVisible = false
      this.$message.warning('已取消')
      this.tform = {    //收集新增品牌数据
        name:'',
        address:'',
        tel:'',
        level:'',
        number:''
      }
    },
    //修改商家信息按钮
    editBusiness(row,$index){
      //清空添加商家
      this.tform = {    
        name:'',
        address:'',
        tel:'',
        level:'',
        number:''
      }
      this.dialog = true;
      this.form = row
      this.list[$index]=this.form
    },
    //查看商家信息
    seeBusiness(row){
      this.Business.splice(0,1)
      this.dialogTableVisible = true
      this.Business.push(row)
    },
    //删除商家
    delStore(index){
      this.list.splice(index,1)
      this.$message.success('删除成功')
    },
    //取消删除商家
    delStoreOk(){
      this.$notify.warning('已取消删除')
    },
    //去商品详情页
    godetails(){
      this.$router.push('/details')
      this.$notify.success('欢迎来到商品详情页')
    },
    
  },
  computed:{
    ...mapGetters(['list']),
  }
};
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: red;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
